<!DOCTYPE html>
<html lang="es">
<head>
<?php include_once('../include/head.php'); ?>
<meta name="description" content="Facultad de Derecho de la Universidad de Buenos Aires">
<title>Prototipo Home Derecho UBA</title>
</head>

<body class="cbp-spmenu-push">
    <div class="container">
    
            <nav id="menu-offcanvas" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
                <h3>Componentes<a class="glyphicon glyphicon-remove" id="hideLeftPush"></a></h3>
                <?php include('tpl/nav.tpl'); ?>
            </nav>
            
            <?php include_once ('../include/menu-top.php'); ?>
            <?php include_once ('../include/header.php'); ?>
            <nav class="MenuSector">
                <div class="pull-left sector">
                    <a class="location" href="components">Componentes</a>
                </div>
                <ol class="breadcrumb pull-right hidden-xs">
                    <li><a href="">Home</a></li>
                    <li class="active">Componentes</li>
                </ol>
                <div class="clearfix"></div>
            </nav>

            <section class="row">
            	<div class="col-lg-3 col-md-3 col-sm-4 menu_izq hidden-xs">
                    <p>Componentes</p>
                    <nav>
                        <?php include('tpl/nav.tpl'); ?>
                    </nav>
                </div>
                <div class="contenido_pagina-col2 col-lg-9 col-md-9 col-sm-8">
                	<h1>Tablas</h1>
                    <div class="row">
                    	<div class="col-md-12">
                        	<h4>Tabla default</h4>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla striped default</h4>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla celeste striped</h4>
                            <div class="table-responsive">
                                <table class="table celeste table-striped">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                                                        
                            <h4>Tabla verde striped</h4>
                            <div class="table-responsive">
                                <table class="table verde table-striped">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla naranja striped</h4>
                            <div class="table-responsive">
                                <table class="table naranja table-striped">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla bordered default</h4>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla bordered + striped default</h4>
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla bordered + striped celeste</h4>
                            <div class="table-responsive">
                                <table class="table celeste table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla bordered + striped verde</h4>
                            <div class="table-responsive">
                                <table class="table verde table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla bordered + striped naranja</h4>
                            <div class="table-responsive">
                                <table class="table naranja table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla hover default</h4>
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla hover celeste</h4>
                            <div class="table-responsive">
                                <table class="table celeste table-hover">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla hover verde</h4>
                            <div class="table-responsive">
                                <table class="table verde table-hover">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h4>Tabla hover naranja</h4>
                            <div class="table-responsive">
                                <table class="table naranja table-hover">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h3>Tabla cabecera celeste <small>agregar clase celeste al tr de thead</small></h3>
                            
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr class="celeste">
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h3>Tabla cabecera azul <small>agregar clase azul al tr de thead</small></h3>
                            
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr class="azul">
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h3>Tabla cabecera verde <small>agregar clase verde al tr de thead</small></h3>
                            
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr class="verde">
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h3>Tabla cabecera naranja <small>agregar clase naranja al tr de thead</small></h3>
                            
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr class="naranja">
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h3>Tabla cabecera roja <small>agregar clase rojo al tr de thead</small></h3>
                            
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr class="rojo">
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr>
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <hr />
                            
                            <h3>Tabla resaltado <small>agregar la clase &lt;celeste, verde, naranja&gt; al tr que se desea resaltar</small></h3>
                            
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Quisque tristique</th>
                                            <th>Fusce scelerisque massa</th>
                                            <th>Sed luctus semper</th>
                                            <th>Donec velit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="celeste">
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr class="verde">
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>
                                        </tr>
                                        <tr class="naranja">
                                            <td>Aenean lobortis iaculis</td>
                                            <td>erat id adipiscing</td>
                                            <td>quis laoreet dolor</td>
                                            <td>eget purus</td>	
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
            </section>
        </div>
        <?php include_once('../../2014/include/footer.php'); ?>
</body>
</html>